<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-17 20:45:06
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-02-23 21:42:56
 * @FilePath: /jeecgboot-vue3/src/views/activiti/procdef/components/ActProcessDefConfigModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <BasicModal destroyOnClose title="流程详情" v-bind="$attrs" @register="registerModal" @visible-change="handlerVisibleChange" @ok="handleSubmit">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="关联业务">
        <ProcessDefConfigBusiness ref="businessLink" :processDefId="procdefId" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="节点配置">
        <ProcessDefConfigActivity :processDefId="procdefId" />
      </a-tab-pane>
      <!-- <a-tab-pane key="3" force-render tab="流程跟踪">
        流程跟踪<br />
        tabs显示该流程定义执行的所有实例<br />
        点击显示具体流程实例的流程图，带进度<br />
      </a-tab-pane> -->
    </a-tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { BasicModal, useModalInner } from '@/components/Modal'
  import ProcessDefConfigBusiness from './business/ConfigBusiness.vue'
  import ProcessDefConfigActivity from './activity/ConfigActivity.vue'
  import { useMessage } from '/@/hooks/web/useMessage'

  const { createMessage } = useMessage()

  const businessLink = ref()
  const procdefId = ref<string>('')
  const activeKey = ref<string>('1')

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    console.log('useModalInner', data)
    procdefId.value = data.processDefId
    setModalProps({
      confirmLoading: false,
      showCancelBtn: true,
      showOkBtn: true,
      defaultFullscreen: true,
    })
  })

  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true })
      //提交表单
      await businessLink.value.mySubmitForm()
      //关闭弹窗
      closeModal()
    } finally {
      setModalProps({ confirmLoading: false })
    }
  }

  const handlerVisibleChange = (visible: boolean) => {
    console.log('流程实例配置窗口visible', visible)
    if (visible) {
    } else {
      procdefId.value = ''
    }
  }
</script>

<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }

    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }

    .ant-modal-body {
      flex: 1;
    }
  }
</style>
